<template>
<div>
    <div class="pay-content-wrapper" v-if='isshowPaySuccee'>
      <div class="succeed-wrapper">
        <div class="title">
          <span class="icon-goumaichenggong icon">
            <span class="path1"></span><span class="path2"></span>
          </span>{{text}}
        </div>
        <p class="scan">扫一扫关注国科科技微信号，订阅课程相关资讯</p>
        <div class="icon-wrapper">
            <img class="icon" src="../../images/WechatQrcode.jpeg">
        </div>
        <div class="btn-wrapper">
            <a @click.once="countConsult" :href="`http://wpa.qq.com/msgrd?v=3&uin=${QQNum}&site=qq&menu=yes`" target="_blank">联系班主任</a>
        </div>
      </div>
   
    </div>
    <div v-else v-html="showOther">

    </div>
    </div>
</template>
<script>
import { infoByTel, postTradeRecord, statisticsSave, backSuccess} from "api/getData";
import { mapGetters, mapActions } from 'vuex';
export default {
  name: 'paySuccee',
  data(){
    return{
      text: '购买成功',
      isshowPaySuccee:true,
      showOther:''
    }
  },
  created() {
  },
  mounted() {
    this.showPaySuccee()
    this.getInfoByTel();
    this.text = this.$route.query.textBool == 1 ? '报名成功' : '购买成功'
  },
  computed: {
    ...mapGetters(['currentUser', 'cityId', 'cityName', 'QQNum'])
  },
  methods: {
    showPaySuccee(){
      let cid = this.toChineseWords(this.$route.query.courseId).slice(1)
      backSuccess(cid).then(data =>{
        if(data.succeedUI==null || data.succeedUI=='')
        {
          this.isshowPaySuccee=true
        }else
        {
          this.isshowPaySuccee=false;
          this.showOther=data.succeedUI
        }
        // console.log(this.isshowPaySuccee,this.courseName)
      })
    },
    trimLeft(s){  
      if(s == null) {  
          return "";  
      }  
      var whitespace = new String(" \t\n\r");  
      var str = new String(s);  
      if (whitespace.indexOf(str.charAt(0)) != -1) {  
          var j=0, i = str.length;  
          while (j < i && whitespace.indexOf(str.charAt(j)) != -1){  
              j++;  
          }  
          str = str.substring(j, i);  
      }  
      return str;  
    },  
    toChineseWords(data){
      if(data == '' || typeof data == 'undefined') return '请输入十六进制unicode';
      data = data.split("\\u");
      var str ='';
      for(var i=0;i<data.length;i++){
          str+=String.fromCharCode(parseInt(data[i],16).toString(10));
      }
      return str;
    },
    ...mapActions(['setUser']),
    getInfoByTel() {
      infoByTel(this.currentUser.account).then(res => {
        this.currentUser.type = res.data.type;
        this.currentUser.cluesOrStuId = res.data.cluesOrStuId;
        this.setUser(this.currentUser)
      })
    },
    countConsult(){
      let userId = this.currentUser && this.currentUser.cluesOrStuId || '',
        account = this.currentUser && this.currentUser.account || '',
        cityId = this.cityId && this.cityId || '',
        cityName = this.cityName && this.cityName || ''

      statisticsSave(cityId, cityName, userId, account)
    },
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';

.pay-content-wrapper {
  @extend .sWidth;
  padding-bottom: 80px;
  margin: 60px auto 0;
  background: #fff;
}

.succeed-wrapper {
  width: 330px;
  margin: auto;

  .title {
    height: 32px;
    line-height: 32px;
    margin-bottom: 60px;
    color: $color-text-m;
    font-size: 26px;
    font-weight: bold;

    .icon {
      display: inline-block;
      width: 50px;
      height: 50px;
      margin-right: 16px;
      vertical-align: -12px;
      font-size: 50px;
    }
  }

  .icon-wrapper {
    .icon {
      display: inline-block;
      width: 164px;
      height: 164px;
      vertical-align: middle;
    }
  }

  .scan {
    height: 15px;
    line-height: 15px;
    color: #767676;
    font-size: 14px;
    margin-bottom: 30px;
  }

  .btn-wrapper {
    margin-top: 30px;

    a {
      display: inline-block;
      width: 164px;
      height: 44px;
      background-color: #30C060;
      color: $color-sub-pay;
      line-height: 44px;
      font-size: 18px;
      border-radius: 2px;
      cursor: pointer;
      border-radius: 2px;
      text-align: center;
      text-decoration: none;
      color: #fff;
      // &:hover {
      // background-color: $color-sub-pay;
      // color: $color-text;
      // }
    }
  }
}
.succeed-wrappe-2{
  width: 420px;
  margin: auto;
  .title {
    height: 32px;
    line-height: 32px;
    margin-bottom: 60px;
    color: $color-text-m;
    font-size: 26px;
    font-weight: bold;

    .icon {
      display: inline-block;
      width: 50px;
      height: 50px;
      margin-right: 16px;
      vertical-align: -12px;
      font-size: 50px;
    }
  }

  .icon-wrapper {
    .icon {
      display: inline-block;
      width: 164px;
      height: 164px;
      vertical-align: middle;
    }
  }
}
.step{
    margin-bottom: 40px;
    span{
        display: inline-block;
        height:26px;
        line-height 26px;
        background:linear-gradient(135deg,rgba(255,73,0,1) 0%,rgba(255,0,49,1) 100%);
        border-radius:2px;
        font-size:14px;
        font-family:MicrosoftYaHei;
        color:rgba(255,255,255,1);
        padding-left: 12px;
    }
    
}
.step-item{
    font-size: 0;
    margin-bottom: 40px;
    span{
        display: inline-block;
        
    }
    .step-item-lable{
        font-size:14px;
        font-family:MicrosoftYaHei-Bold;
        font-weight:bold;
        color:rgba(32,32,32,1);
        line-height:14px;
    }
    .step-item-text{
        font-size:14px;
        font-family:MicrosoftYaHei;
        color:rgba(32,32,32,1);
        line-height:14px;
    }
}
.contact{
    font-size: 0;
    padding: 10px;
    background:rgba(245,245,245,1);
    margin-bottom: 40px;
    >div{
        display: inline-block;
    }
    .contact-img{
        margin-right: 20px;
        width:141px;
        height:141px;
    }
    .contact-img img{
        width:141px;
        height:141px;
    }
}
.contact-content{
    vertical-align: top;
    .contact-title{
        
        padding-top: 10px;
        font-size:16px;
        font-family:MicrosoftYaHei-Bold;
        font-weight:bold;
        color:rgba(32,32,32,1);
        line-height:16px;
        margin-bottom: 20px;
    }
    .contact-time{
        font-size:16px;
        font-family:MicrosoftYaHei;
        color:rgba(32,32,32,1);
        line-height:16px;
        margin-bottom: 40px;
    }
    a {
      display: inline-block;
      width: 116px;
      height: 32px;
      background-color: #30C060;
      color: $color-sub-pay;
      line-height: 32px;
      font-size: 14px;
      border-radius: 2px;
      cursor: pointer;
      border-radius: 2px;
      text-align: center;
      text-decoration: none;
      color: #fff;
    }
}
.course-title{
  font-size:14px;
  font-family:MicrosoftYaHei;
  color:rgba(118,118,118,1);
  line-height:14px;
  margin-bottom: 20px;
}
.nisp{
  margin-top: 12px;
  padding-bottom: 10px;
}
.nisp-p{
  font-size:12px;
  font-family:MicrosoftYaHei;
  color:rgba(118,118,118,1);
  line-height:12px;
  margin-bottom: 12px;
}
</style>

